<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementUI/element-plus_dist.css">
    <style>
        .radius {
            height: 200px;
            width: 600px;
            border: 1px solid;
            border-radius: 10px;
            margin-top: 200px;
            margin-left: 30%;
        }
        .formitem {
            margin-top: 10px;
            width: 500px;
        }
    </style>
</head>
<body>
    <div id="app" class="radius">

        <el-form :model="form" label-width="120px">
            <el-form-item label="用户名：" class="formitem">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="密码：" class="formitem">
                <el-input v-model="form.pwd" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script src="../plugins/axios.min.js"></script>
    <script src="../plugins/vue.global.js"></script>
    <script src="../plugins/elementUI/element-plus.js"></script>
    <script src="../plugins/elementUI/icon.min.js"></script>
    <script>
        const {createApp, ref} = Vue
        const app = createApp({
            setup(){
                const form = ref({})
                const message = ref({})
                const radiusType = ref("base")
                function onSubmit(){
                    axios.post('/login', form.value)
                        .then(function (response) {
                            console.log(response.data.code)
                            message.value = response.data.message
                            if(response.data.code == 1000){
                                ElMessage.success("hello")
                                alert('登录成功')
                                window.location.href = "/pages/page.html"
                            }else{
                                ElMessage.success("hello")
                                alert('用户名或者密码错误')
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                        .finally(function (){
                            console.log('-------------')
                        });
                }
                return {
                    form,
                    onSubmit,
                    radiusType
                }
            }
        });
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>
</html>